<html>
<head>
    <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> -->
    <!-- 上面的引入的是最新1.11版本的，在引入qqface时出现问题mist移除了，所以用1.8版本的，就是qqFace自带的jquery文件 -->
    <script src="__STATIC__/chat/js/jquery.min.js"></script>
    <script src="__STATIC__/qqFace/js/jquery.qqFace.js"></script>
    
    <link rel="stylesheet" href="__STATIC__/chat/css/chat.css">
    <style>
		.qqFace { margin-top: 4px; background: #fff; padding: 2px; border: 1px #dfe6f6 solid; }
		.qqFace table td { padding: 0px; }
		.qqFace table td img { cursor: pointer; border: 1px #fff solid; }
		.qqFace table td img:hover { border: 1px #0066cc solid; }
    </style>
	<title>聊天室</title>
</head>
<body>
	<div class="content">
		<!-- 头部 -->
		<div class="head">
			<div class="shop-title">商店</div>
			<div class="shop-into">进店</div>
		</div>
		<!-- 消息展示 -->
		<div class="chat">
			<div class="left"><div class="image1" style="background-image: url('http://chat.admin/static/chat/img/1.jpg');background-size: 100%;"></div>-你好</div>
			<div class="right">你好-<div class="image2" style="background-image: url('http://chat.admin/static/chat/img/2.jpg');background-size: 100%;"></div></div>
		</div>
		<!-- 发送消息 -->
		<div class="foot">
			<div class="en">表情</div>
			<input class="info" id="saytext">
			<input type="file" name="pic" id="file" style="display:none;">
			<div class="image_up">图片</div>
			<div class="send">发送</div>
		</div>
	</div>
	<script>

		// 获取fromid和toid
		var fromid = {$fromid};
		var toid = {$toid};

		var from_head;
		var to_head;
		var to_name;

		var online = 0;

		var API_URL = "http://chat.admin/index.php/api/chat/";

		var ws = new WebSocket('ws://127.0.0.1:8282');
		ws.onmessage = function(e){
			var message = eval("("+e.data+")");
			switch(message.type){
				case 'init':
					var bild = '{"type":"bind","fromid":"'+fromid+'"}';
					ws.send(bild);
					// 页面初始化 获取用户信息
					get_head(fromid,toid);
					// 获取对话昵称
					get_name(toid);
					// 页面加载，还原聊天记录
					message_load();
					// 查看对方是否在线
					var online = '{"type":"online","toid":"'+toid+'","fromid":"'+fromid+'"}';
					ws.send(online);
					// 这里就是进入聊天页面 将之前的消息都标为已读
					changeNoRead();
					return;
				case 'text':
					if(toid==message.fromid){
						// $('.chat').append('<div class="left"><div class="image1" style="background-image: url('');background-size: 100%;"></div>-'+message.data+'</div>');
						$('.chat').append('<div class="left"><div class="image1" style="background-image: url('+to_head+');background-size: 100%;"></div>'+replace_em(message.data)+'</div>');
						$('.chat').scrollTop(3000);
						changeNoRead();
					}
					
					return;
				case 'save':
				    // 将聊天记录持久化 就是放入数据库里	
					save_message(message);
					if(message.isread==1){
						online=1;
						$(".shop-into").text('在线');
					}else{
						online=0;
						$(".shop-into").text('对方已下线');
					}
					return;
				case 'say_img':
					
					$('.chat').append('<div class="left"><div class="image1" style="background-image: url('+to_head+');background-size: 100%;"></div><div class="imgtext"><img style="width:80px;height:80px;float:left;" src="__ROOT__/uploads/chat/'+message.img_name+'" alt="" /></div></div>');
					$('.chat').scrollTop(3000);
					changeNoRead();
					return;
				case 'online':
					if(message.status==1){
						online=1;
						$(".shop-into").text('在线');
					}else{
						online=0;
						$(".shop-into").text('不在线');
					}
			}
		}
		$('.send').click(function(){
			var a = $(".info").val();
			if(!$.trim(a)){
				alert('输入为空');
				return;
			}

			var message = '{"data":"'+a+'","type":"say","fromid":"'+fromid+'","toid":"'+toid+'"}';

			// $('.chat').append('<div class="right">'+a+'-右</div>');
			$('.chat').append('<div class="right">'+replace_em(a)+'<div class="image2" style="background-image: url('+from_head+');background-size: 100%;"></div></div>');
			$('.chat').scrollTop(3000);
			ws.send(message);
			$('.info').val("");
		})
		function changeNoRead(){
			$.post(
				API_URL+'changeNoRead',
				{"fromid":fromid,"toid":toid},
				function(){

				},'json'
			)
		}

		function save_message(message){
			$.post(
				API_URL+"save_message",
				message,
				function(){
					
				},'json'
			)
		}
		function get_head(fromid,toid){
			$.post(
				API_URL+"get_head",
				{"fromid":fromid,"toid":toid},
				function(e){
					console.log(e);
					from_head = e.from_head;
					to_head = e.to_head;
				},'json'
			)
		}
		function get_name(toid){
			$.post(
				API_URL+"get_name",
				{"toid":toid},
				function(e){
					console.log(e);
					to_name = e.toname;
					$(".shop-title").text("与"+to_name+"聊天中...");
				},'json'
			)
		}
		function message_load(){
			$.post(
				API_URL+"load",
				{"fromid":fromid,"toid":toid},
				function(e){
					console.log(e);
					// 将之前聊天记录展示
					$.each(e,function(index,content){
						if(fromid==content.fromid){
							// 如果type=2表示图片 展示图片
							if(content.type==2){
								$('.chat').append('<div class="right"><div class="imgtext"><img style="width:80px;height:80px;float:left;margin-left:120px;" src="__ROOT__/uploads/chat/'+content.content+'" alt="" /></div><div class="image2" style="background-image: url('+from_head+');background-size: 100%;"></div></div>');
							}else{
								$('.chat').append('<div class="right">'+replace_em(content.content)+'<div class="image2" style="background-image: url('+from_head+');background-size: 100%;"></div></div>');
							}
							$('.chat').scrollTop(3000);
						}else{
							if(content.type==2){
								$('.chat').append('<div class="left"><div class="image1" style="background-image: url('+to_head+');background-size: 100%;"></div><div class="imgtext"><img style="width:80px;height:80px;float:left;" src="__ROOT__/uploads/chat/'+content.content+'" alt="" /></div></div>');
							}else{
								$('.chat').append('<div class="left"><div class="image1" style="background-image: url('+to_head+');background-size: 100%;"></div>'+replace_em(content.content)+'</div>');
							}
							$('.chat').scrollTop(3000);
						}
					})
					$('.chat').scrollTop(3000);
				},'json'
			)
		}

		$(".image_up").click(function(){
			$("#file").click();
		})
		$("#file").change(function(){   //表单改变触发change事件
			formdata = new FormData();  //获取表单所有数据
			formdata.append('fromid',fromid);  //将元素放到formdata数据中
			formdata.append('toid',toid);
			formdata.append('online',online);
			formdata.append('file',$("#file")[0].files[0]);
			//console.log($("#file")[0].files);
			
			$.ajax({
				url:API_URL+"uploading",
				type:"POST",
				cache:false,
				data:formdata,
				dataType:"json",
				processData:false,  //默认转对象 防止
				contentType:false,   //默认urlincode编码，禁止
				success:function(data,status,xhr){
					var a = eval(data);   // 将json格式的data转为数组格式a
					if(a.status=='ok'){
						$('.chat').append('<div class="right"><div class="imgtext"><img style="width:80px;height:80px;float:left;margin-left:120px;" src="__ROOT__/uploads/chat/'+a.img_name+'" alt="" /></div><div class="image2" style="background-image: url('+from_head+');background-size: 100%;"></div></div>');
						$('.chat').scrollTop(3000);
						// 发送给socket服务器
						var message = '{"data":"'+a.img_name+'","fromid":"'+fromid+'","toid":"'+toid+'","type":"say_img"}';
						$("#file").val("");
						ws.send(message);
					}else{
						console.log(a.status);
					}
					console.log(a);
					console.log(a.status);
					console.log(status);
					console.log(xhr);
				}

			});
			console.log(1111);
		})

		// 表情发送
		$(function(){

			$('.en').qqFace({ 

				assign:'saytext', 

				path:'__STATIC__/qqFace/arclist/'	//表情存放的路径

			});

			$(".sub_btn").click(function(){

				var str = $("#saytext").val();

				$("#show").html(replace_em(str));

			});

		});

		//查看结果

		function replace_em(str){

			str = str.replace(/\</g,'&lt;');

			str = str.replace(/\>/g,'&gt;');

			str = str.replace(/\n/g,'<br/>');

			str = str.replace(/\[em_([0-9]*)\]/g,'<img src="__STATIC__/qqFace/arclist/$1.gif" border="0" />');

			return str;

		}
		
	</script>
</body>
</html>